<!DOCTYPE html>
<html lang="zh">

<head th:replace="/fragment/head::user-head(~{::title},~{})">
    <title>博客管理</title>
</head>

<body>
    <div id="app">
        <nav th:replace="/fragment/nav::nav2"></nav>

        <div class="ui container ">
            <div th:action="@{/search/{uid}(uid=${session.uid})}" class="ui form segment" method="POST">
                <div class="inline fields">
                    <div class="field">
                        <input type="text" name="title" placeholder="标题" v-model="title">
                    </div>

                    <div class="field">
                        <select class="ui multiple selection dropdown" v-model="selected" multiple>
                            <i class="dropdown icon"></i>
                            <div class="default text">类别</div>
                            <div class="menu">
                                <option v-for="label in labels" v-bind:value="label.lid" class="item">
                                    {{label.name}}
                                </option>
                            </div>
                        </select>
                    </div>

                    <div class="field" @click="search()">
                        <button class="ui teal basic button"><i class="search icon"></i>搜索</button>
                    </div>
                </div>
            </div>

            <table class="ui celled table">
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>简介</th>
                        <th>阅读</th>
                        <th>点赞</th>
                        <th>收藏</th>
                        <th>是否发布</th>
                        <th>日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="x in table">
                        <td>{{x.title}}</td>
                        <td>{{x.summary}}</td>
                        <td>{{x.views}}</td>
                        <td>{{x.likes}}</td>
                        <td>{{x.favorites}}</td>
                        <td>{{x.publish}}</td>
                        <td>{{x.date}}</td>
                        <td>
                            <a :href="`/user/edit/${x.bid}`" class="ui teal button">编辑</a>
                            <a :href="`/user/del/${x.bid}`" class="ui red button">删除</a>
                        </td>
                    </tr>


                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="8">
                            <div class="ui right floated pagination menu">
                                <a class="icon item" @click="this.get_list(pageNo-1)">
                                    <i class="left chevron icon"></i>
                                </a>
                                <a class="icon item" @click="this.get_list(pageNo+1)">
                                    <i class="right chevron icon"></i>
                                </a>
                            </div>
                        </th>
                    </tr>
                </tfoot>
            </table>

        </div>
        <footer th:replace="/fragment/footer::f1"></footer>
    </div>
    <script th:replace="/fragment/script::jquery"></script>
    <script th:replace="/fragment/script::semantic"></script>
    <script th:replace="/fragment/script::mobile-hide"></script>
    <script th:replace="/fragment/script::dropdown"></script>
    <script th:replace="/fragment/script::vue"></script>
    <script th:if="${msg}">
        alert('[[${msg}]]');
    </script>
    <script>
        const ajax = {
            data() {
                return {
                    table: [],
                    labels: [],
                    root: "[[@{/}]]",
                    total: 0,
                    pageNo: 0,
                    maxpageNo: 0,
                    title: "",
                    selected: []
                }
            },
            methods: {
                search() {
                    var jsons = {
                        title: this.title,
                        tags: this.selected
                    };
                    postJson('/search/[[${session.uid}]]', jsons, (r) => {
                        this.table = r;
                    });
                },
                get_list(x) {
                    if (x < 0 || x > this.maxpageNo) {
                        alert('没有了')
                        return;
                    }
                    this.pageNo = x;
                    var jsons = {
                        uid: "[[${session.uid}]]",
                        pageNo: x,
                        pageSize: 10
                    };
                    postJson('/blog/list', jsons, (r) => {
                        this.table = r;
                    });
                }
            },
            mounted() {
                getJson('/blog/total/[[${session.uid}]]', (r) => {
                    this.total = r;
                    this.maxpageNo = parseInt(r / 10);
                }).then(() => {
                    this.get_list(0);
                });
                getJson('/getLabels', (r) => {
                    this.labels = r.list;
                })
            }
        }

        const app = Vue.createApp(ajax)
        app.mount('#app')
    </script>
</body>

</html>